<template>
  <div class="student">
    <h1>学校名称：{{ name }}</h1>
    <h1>学校地址：{{ address }}</h1>
    <h1>学校年龄：{{ StudentPropAge + 10 }}</h1>
    <button @click="changeProps">修改接受过来的props</button>
  </div>
</template>

<script>
/*
备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
*/
export default {
  name: "Student",
  /*数组类型的props
  props: ["name","address"],*/

  /*
  对props进行类型限制
  props:{
    name:String,
    address:String,
    age:Number,
  }
  */

  /*对象类型的props*/
  props: {
    name: {
      type: String,
      default: "黑马程序员",
      required:true,
    },
    address: {
      type: String,
      default: "长沙",
      required:true,
    },
    age: {
      type: Number,
      default: 0,
      required:true,
    },
  },

data(){
  return{
     StudentPropAge:this.age, // 外部传递过来的prop转存一份用于修改
  }
},
  mounted(){
    console.log(this);
  },
  methods:{
    changeProps(){
      //this.age=100 修改props(不建议修改外部传递过来的props)
      this.StudentPropAge=100 
    }
  }
};
</script>

<style>
.student {
  background-color: #ccc;
}
</style>